{% extends "./layout/layout.tpl" %}

{# 主题内容 #}
{% block main %}
<nav class="navbar navbar-dark bg-success">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">CC-手机传感器测试程序</a>

    <div class="d-flex align-items-center">
      <button type="button" class="btn btn-light me-3">房间号：<span id="room">{{ room }}</span></button>
      <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#modal">LINK</button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="modalLabel">调试地址</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">

            <div class="d-flex align-items-center pt-2 pb-2">
              手机调试地址: <span id="href-ip">/m</span>
              <button type="button" class="btn btn-success btn-sm ms-3" onclick="copyText()">复制</button>
              <button type="button" class="btn btn-success btn-sm ms-3" onclick="generateQrCode()">二维码</button>
            </div>

            <div id="mobileCode" style="display: none"></div>

            <hr />
            {% for ip in ips %}
              <div class="d-flex align-items-center pt-2 pb-2">
                ip: {{ ip }}
                <button type="button" class="btn btn-success btn-sm ms-3" onclick="copyText('{{ip}}')">复制</button>
              </div>

              <div class="d-flex align-items-center pt-2 pb-2">
                手机调试地址: <span>{{ ip }}:7001/m</span>
                <button type="button" class="btn btn-success btn-sm ms-3" onclick="copyText('{{ip}}:7001/m')">复制</button>
                <button type="button" class="btn btn-success btn-sm ms-3" onclick="generateQrCode('http://{{ip}}:7001/m', 'mobileCode{{ip}}')">二维码</button>
              </div>

              <div id="mobileCode{{ip}}" style="display: none"></div>

              <hr />
            {% endfor %}

          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<div class="container flex-grow-1 d-flex flex-column overflow-hidden">
  <div class="pt-2 d-flex align-items-center">
    <div class="flex-grow-1">共 <span class="fw-bold fst-italic" id="count"> 0 </span> 条数据</div>
    <div class="text-end">
      <button type="button" class="btn btn-danger btn-sm" onclick="handleClear()">清空</button>
      <button type="button" class="btn btn-success btn-sm ms-3" onclick="exportExcel()">导出</button>
    </div>
  </div>
  <div class="table-responsive flex-grow-1">
    <table id="table" class="table table-striped table-hover table-bordered  text-center align-middle mb-2 mt-2">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">x</th>
          <th scope="col">y</th>
          <th scope="col">z</th>
          <th scope="col">Time(ms)</th>
          <th scope="col">Time(local))</th>
        </tr>
      </thead>
      <tbody id="data"></tbody>
    </table>
  </div>
</div>

{% endblock %}

{# js脚本 #}
{% block script %}
<script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
<script src="/public/scripts/pc/clipboard.js"></script>
<script src="/public/scripts/pc/qrcode.js"></script>
<script src="/public/scripts/pc/qr.js"></script>
<script src="/public/scripts/io.js"></script>
<script src="/public/scripts/pc/message.js"></script>
<script src="/public/scripts/pc/table2excel.js"></script>
<script src="/public/scripts/pc/action.js"></script>

{% endblock %}
